<template>
  <span @click.stop="look"
    ><slot></slot>
    <LoadingBox v-if="showLoading" />
    <ProcessLayout class="wrap" v-if="visible" @click.stop="">
      <template #title> {{ t('查看流程') }} </template>
      <template #close>
        <a-button type="primary" class="clean-icon" @click.stop="close">{{ t('关闭') }}</a-button>
      </template>
      <template #full>
        <LookTask v-if="visible" :taskId="props.taskId" :processId="props.processId" />
      </template>
    </ProcessLayout>
  </span>
</template>

<script setup lang="ts">
  import ProcessLayout from './flow/Layout.vue';
  import LookTask from './flow/LookTask.vue';
  import { LoadingBox } from '/@/components/ModalPanel/index';
  import { notification } from 'ant-design-vue';
  import { onMounted, ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const props = withDefaults(
    defineProps<{
      processId: string;
      taskId: string;
      visible?: boolean;
    }>(),
    {
      processId: '',
      taskId: '',
      visible: false,
    },
  );
  let emits = defineEmits(['close']);
  let visible = ref(false);
  let showLoading = ref(false);
  onMounted(() => {
    if (props.visible) {
      look();
    }
  });
  async function look() {
    if (props.processId) {
      showLoading.value = false;
      visible.value = true;
    } else {
      showLoading.value = false;
      notification.open({
        type: 'error',
        message: t('查看'),
        description: t('请选择一个流程进行查看'),
      });
    }
  }
  function close() {
    visible.value = false;
    emits('close');
  }
</script>
